import { FC } from 'react';
import { Wrapper, Dot, Text } from './styled';

interface StatusColorMap {
  [name: string]: {
    name: string;
    value: string;
  };
}

const DEFAULT_STATUS_COLOR_MAP = {
  pending: {
    name: '等待中',
    value: '#FFAF25',
  },
  success: {
    name: '成功',
    value: '#52C41A',
  },
  failed: {
    name: '失败',
    value: '#FF505F',
  },
};

const generateTableStatus = (
  statusMap: StatusColorMap = DEFAULT_STATUS_COLOR_MAP
) => {
  const TableStatus: FC<{ status: string | number }> = ({ status }) => {
    if (!statusMap[status]) {
      console.warn('Component:TableStatus invalid status');
      return <span>-</span>;
    }
    const { name, value } = statusMap[status];
    if (!name || !value) {
      console.warn(
        `Component:TableStatus status-"${status}" has not been set compeletely`
      );
      return <span>-</span>;
    }
    return (
      <Wrapper>
        <Dot color={value} />
        <Text>{name}</Text>
      </Wrapper>
    );
  };
  return TableStatus;
};

export default generateTableStatus;
